Dynamic color makes personal devices feel personal 動態色彩教程&顏色系統

brand color system 應用品牌顏色系統

使用自定義主題可確保你的應用程式為未啟用動態顏色的使用者提供備用配色方案。

Visualizing dynamic color in your app 使用動態顏色的教程

Color concepts 色彩概念

動態色彩是"Material You"的核心功能，透過演算法從桌布提取顏色並應用到系統介面中。

Luminance  亮度:亮度相似的元素在可讀性方面不會有合適的對比度，而亮度值不同的元素將更易區分。

Tonal palettes 色調板：將一種色相（提取的活力色）轉換為一系列相關色調，生成十三種色調的色調板。這些色調可用於從單個元件元素到整個應用主題的各種場景。利用亮度進行設計能打造出更具易用性的調色盤。

Extracting colors 提取顏色

第一步：https://www.figma.com/community/file/1035197037666593721/visualizing-dynamic-color-in-your-app-with-material-design將檔案複製到你的檔案中。

第二步： 在你的檔案中開啟 Material Theme Builder。https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder

選擇“動態”選項後，拖入一張圖片或從檔案瀏覽器中選擇一張圖片。這些顏色會被系統分類，並分配一個“型別”。系統會自動生成五個色階，從最淺到最深。這些色階會基於 亮度（Luminance） 進行調整，以適應不同的介面需求。

第三步：從色調範圍中選取特定亮度的色調，對映到預定義的配色方案角色中。圖層命名需正確才能生效。

Color System Analysis 色彩系統分析

lightmode亮色模式：

Darkmode暗色模式：

Material Design 3 顏色系統詳細解析

這張圖展示了 Material Design 3（M3） 顏色系統的命名規則和層次關係。

1. 顏色的基礎分類

• Primary（主色） - 應用的主品牌色，主要用於重要按鈕、選中狀態、導航欄等核心 UI 元素。

  例子：應用的主按鈕（如 “提交” 按鈕）一般使用Primary作為背景色。

• Secondary（次色） - 作為輔助顏色，適用於次級按鈕、標籤、圖示等。

  例子：次級操作按鈕（如 “取消” 按鈕）可能使用Secondary顏色。

• Tertiary（輔助色） - 額外的強調色，通常用於裝飾或次要互動元素。

  例子：社交媒體應用中的點贊、收藏按鈕，可能使用Tertiary顏色。

• Error（錯誤色） - 主要用於表示錯誤、警告、失敗等狀態。

  例子：表單驗證失敗時的錯誤資訊背景可能用Error Container，錯誤文字可能用On Error Container。

• Surface（表面色） - 用於介面背景，使 UI 結構清晰，通常是不同層級的灰色調。

  例子：應用主介面背景可能使用Surface，而彈窗可能使用Surface Container。

• Inverse（反色） - 適用於深色模式，確保對比度良好。

  例子：在深色模式下，底部導航欄的背景可能用Inverse Surface，其中的文字用Inverse On Surface。

2. 顏色的用途

在每個顏色分類下，Material 設計提供了不同的用途，這些用途決定了顏色如何應用到 UI 元件中。

• On（文字或圖示顏色）

  含義：On Primary、On Secondary等，表示該顏色是在Primary、Secondary等背景色上使用的文字或圖示顏色，確保足夠的對比度。

  例子：Primary按鈕的文字通常用On Primary顏色。

• Container（容器顏色）

  含義：Primary Container、Secondary Container等，表示該顏色用於卡片、彈窗等大塊背景色，比基礎顏色更淺，以便區分層級。

  例子： 一條錯誤資訊可能會用Error Container作為背景，文字用On Error Container。

• Fixed（固定顏色）

  含義：Primary Fixed、Secondary Fixed表示該顏色不會隨主題模式變化，確保一致性。

  例子： 在某些品牌色應用場景中，為了保持一致性，可以用Fixed顏色，而不是Primary，這樣無論是淺色還是深色模式，顏色都不會變化。

• Inverse（反色模式）

  含義：Inverse Surface、Inverse Primary等用於深色模式，提供高對比度的替代顏色。

  例子： 在深色模式下，主要背景可能是Inverse Surface，而高亮文字使用Inverse Primary。

顏色的層級（數值）

每種顏色後面的數值（如P-40、S-100）表示亮度（Lightness），數值越高，顏色越亮。

• 100 級（E-100, P-100, S-100） → 極亮色，通常用於文字顏色（例如On Primary可能是白色）。

• 90 級（E-90, P-90, S-90） → 容器背景色，用於卡片、彈窗、元件背景。

• 40 級（P-40, S-40, T-40） → 主要顏色，用於填充 UI 元件（如按鈕背景）。

• 10 級（E-10, P-10, S-10） → 極暗色，用於高對比度的文字（如On Error Container）。

關鍵總結

1. 基礎分類：
   • Surface是 UI 的背景色，On Surface是文字色。
   • Inverse系列用於深色模式。

2. 用途分類：
   • Surface Container系列用於不同層級的背景色。
   • Outline系列用於邊框和分隔線。

3. 亮度層級（N-100 ~ N-10）
   • 數值越高顏色越亮，適用於背景。
   • 數值越低顏色越暗，適用於文字和邊框。

案例1 ：亮色模式Error模組

Error：錯誤按鈕容器的背景顏色

on Error：錯誤按鈕容器上文字的顏色

Error Container：用於容器（比如提示框、卡片、背景）的錯誤色。

onError Container：Error Container 上的文字顏色

案例2 ：亮色模式Surface表面顏色模組

• Surface：應用主要的背景顏色，用於大面積填充。

• Surface Dim：用於提供更柔和的背景效果，適合深色模式。

• Surface Bright：提高亮度，使介面更輕盈,淺色模式背景

• Surface Container Lowest：最亮的表面容器背景色，通常用於卡片和輸入框背景.

• Surface Container Low：略深一點的容器背景色

• Surface Container：標準容器背景色,普通面板背景

• Surface ContainerHigh：更深的背景,高層級元件（如警告框）

• Surface ContainerHighest：最深的背景，最高層級（如模態視窗）
  

• On Surface:主要的文字顏色,正文文字

• On Surface Variant:次要文字顏色,輔助說明文字

• Outline:主要的邊框和分隔線,按鈕、卡片的邊框

• Outline Variant:更輕的邊界顏色,輕微的分隔線

• Inverse Surface:反色表面,深色模式中的標題文字

• Inverse On Surface:反色上的文字,深色模式下的強調按鈕

• Inverse Primary:反色的主色深色模式下的強調按鈕

• Scrim：半透明遮罩，彈窗背景的模糊層

• Shadow：元件的陰影，卡片的投影